<template>
  <div class="card form-card">
    <div v-if="step!=='login'" style="margin-bottom:8px;">
      <a class="back-link" href="#" @click.prevent="step='login'">← 返回</a>
    </div>
    <h2>{{ title }}</h2>

    <div v-if="step==='login'">
      <LoginInline @success="goProfile" @to-register="step='register'" @to-reset="step='reset'" />
    </div>
    <div v-else-if="step==='register'">
      <RegisterInline @success="step='login'" />
    </div>
    <div v-else>
      <ResetInline @success="step='login'" />
    </div>
  </div>
</template>

<script>
import LoginInline from '../widgets/LoginInline.vue'
import RegisterInline from '../widgets/RegisterInline.vue'
import ResetInline from '../widgets/ResetInline.vue'

export default {
  name: 'AuthWizardView',
  components: { LoginInline, RegisterInline, ResetInline },
  data() {
    return { step: 'login' }
  },
  computed: {
    title() {
      if (this.step === 'login') return this.$t('login.title')
      if (this.step === 'register') return this.$t('register.title')
      return this.$t('reset.title')
    }
  },
  methods: {
    goProfile() { this.$router.push('/profile') }
  }
}
</script>

<style scoped>
</style>
